<template>
	<uni-swiper-dot :info="list1" :current="current" field="content" mode="round" :dots-styles="dotsStyles">
		<swiper class="ad-img-swiper" circular :autoplay="true" :interval="5000" :duration="1000" @change="change">
			<swiper-item v-for="(item, index) in list1" :key="index">
				<image class="ad-img-swiper" :src="item.imageurl" @click="item.linkurl?navTo(item.linkurl):''"></image>
			</swiper-item>
		</swiper>
	</uni-swiper-dot>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	import { navTo } from '@/utils/navigator';
	import { toPublish } from '@mqtt';
	import { showLoading } from '@/utils/prompt';
	import { ads } from '@/gql/user';
	const list1 = ref()
	const current = ref(0)
	const dotsStyles = {
		backgroundColor: 'rgba(255, 255, 255,0.3)',
		border: '1px rgba(255, 255, 255,0.3) solid',
		color: '#fff',
		selectedBackgroundColor: 'rgba(255, 255, 255,0.9)',
		selectedBorder: '1px rgba(255, 255, 255,0.9) solid'
	}
	init()
	function init() {
		showLoading()
		const payload = {
			query: ads,
			variables: {
				type: 'subscribe_image',
			},
		};
		toPublish(
			'ql/driver/getAds',
			payload,
			(obj : any) => {
				uni.hideLoading();
				const { ads } = obj.data;
				list1.value = ads
			}
		);
	}
	function change(e : any) {
		current.value = e.detail.current;
	}
</script>

<style scoped lang="less">
	.ad-img-swiper {
		width: 100%;
		height: 327rpx;
	}
</style>